import { FC } from 'react'

import RiskRankingTabItem, { Option } from './RiskRankingTabItem'

export type RiskRankingTabProps = {
  options: Option[]
  activeTabValue?: string | number
  onChange?: (value: string | number, option: Option) => void
  onMouseEnter?: () => void
  onMouseLeave?: () => void
}

const RiskRankingTab: FC<RiskRankingTabProps> = ({
  options = [],
  activeTabValue,
  onChange,
  onMouseEnter,
  onMouseLeave
}) => {
  return (
    <div
      className="risk-ranking-tab"
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <div style={{ height: 58, display: 'flex', alignItems: 'center' }}>
        {options.map((option, index) => {
          return (
            <RiskRankingTabItem
              key={index}
              label={option.label}
              value={option.value}
              activeTabValue={activeTabValue}
              onChange={onChange}
            />
          )
        })}
      </div>
    </div>
  )
}

export default RiskRankingTab
